<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>品牌管理</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<%--	<style>--%>
<%--		/*设置此处表格可以自适应图片大小*/--%>
<%--		.layui-table-cell{--%>
<%--			display:table-cell;--%>
<%--			vertical-align: middle;--%>
<%--		}--%>
<%--	</style>--%>
</head>
<body>
<!--分页表格-->
	<table id="brand" lay-filter="brand"></table>
	<script>
		layui.use("table", function () {
			var table = layui.table;
			var $ = layui.jquery;
			table.render({
				elem: "#brand",
				cols: [[
					{field: "brandId", title: "编号", sort: true},//fixed：冻结窗格   , fixed: "left"
					{field: "name",title: "名称"},
					{field: "firstLetter", title: "首字母"},
					{field: "sort", title: "排序"},
					{field: "showStatus", title: "是否显示"},
					{field: "logo", title: "品牌logo",templet:"#imgtemp"},
					{field: "brandStory", title: "品牌故事"},
					{title:"操作",toolbar:"#operation"}]],
				url: "${pageContext.request.contextPath}/brand/brands",
				page: true,//开启分页
				limits:[5,10,20],//每页条数的选择项
				limit:5,//每页显示的条数，默认：10
				toolbar:"#tool"
			});
		})
	</script>
<!-- 定义图像模板 d为filed中的返回参数,url为后台中每一组元素的url -->
<script type="text/html" id="imgtemp">
		<div><img src="${pageContext.request.contextPath}/img/brandImg/{{d.logo}}" style="width:60px;height:50px"></div>
</script>
<!--修改删除操作按钮-->
	<script id="operation" type="text/html">
		<button class="layui-btn layui-btn-xs" lay-event="edit">修改</button>
		<button class="layui-btn layui-btn-xs" lay-event="remove">删除</button>
	</script>
<!--工具栏按钮-->
		<script type="text/html" id="tool">
			<button class="layui-btn layui-btn-xs" onclick="openAddModal()">添加<i class="layui-icon layui-icon-addition"></i></button>
		</script>
<!--添加功能表单-->
	<script id="addForm" type="text/html">
		<form class="layui-form" lay-filter="addForm">
			<div class="layui-form-item">
				<label class="layui-form-label">品牌名</label>
				<div class="layui-input-block" style="width:200px">
					<input type="text" name="name" required  lay-verify="required" placeholder="请输入品牌名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">首字母</label>
				<div class="layui-input-block" style="width:200px">
					<input type="text" name="firstLetter" required  lay-verify="required" placeholder="请输入首字母" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block" style="width:200px">
					<input type="number" name="sort" required  lay-verify="required" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否显示</label>
				<div class="layui-input-block" style="width:200px">
					<input type="number" name="showStatus" required  lay-verify="required" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">品牌故事</label>
				<div class="layui-input-block" style="width:200px">
					<textarea name="brandStory" required  lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<img id="addImg"  width="120px" height="150px">
				<label class="layui-form-label">上传图片</label>
				<div class="layui-input-block" style="width:200px">
					<input  type="hidden" name="logo"/>
					<button type="button" id="test" class="layui-btn">
						<i class="layui-icon layui-icon-upload"></i>上传图片
					</button>
				</div>
			</div>
		</form>
	</script>
<!--渲染添加弹出框-->
	<script type="text/javascript">
		//执行弹出弹出层的代码
		function openAddModal(){
			layui.use(["layer","form",'upload'],function(){
				var layer = layui.layer;
				var $ = layui.$;
				var table = layui.table;
				var form = layui.form;
				var upload = layui.upload;
				layer.open({
					type:1,
					content:$("#addForm").html(),
					btn:["添加","取消"],
					area:'500px',
					success:function(){
						//如有依赖layui元素的控件，需要在此处添加渲染

						<!--在此处渲染文件上传  文件上传-->
						var uploadInst = upload.render({
							elem: '#test' //绑定元素
							,url: '${pageContext.request.contextPath}/brand/upload' //上传接口
							,field: "file"//设置上传的参数名
							,done: function(res){
								//上传完毕回调
								//console.log("${pageContext.request.contextPath}/img/"+res.path);
								$("input[name=logo]").val(res.path);
								$("#addImg").prop("src","${pageContext.request.contextPath}/img/brandImg/"+res.path);
							}
							,error: function(){
								//请求异常回调
							}
						});

					},
					//yes函数为点击添加按钮触发
					yes:function(index,layobj){//index：弹出层标识，layobj：触发事件的对象
						//获取表单中所有的数据
						var o =  form.val("addForm");
						$.ajax({
							"url":"${pageContext.request.contextPath}/brand/brands",
							"data":JSON.stringify(o),
							"type":"post",
							"contentType":"application/json",
							"dataType":"json",
							"success":function(result){
								if (result.status == "success") {
									table.reload("brand");
									layer.close(index);
								}
							}
						})
					}
				});
			})
		}
	</script>
<!--修改功能表单-->
	<script id="updateForm" type="text/html">
		<form class="layui-form" action="" lay-filter="updateForm">
			<input type="hidden" name="brandId" />
			<div class="layui-form-item">
				<label class="layui-form-label">品牌名</label>
				<div class="layui-input-block" style="width:200px">
					<input type="text" name="name" required  lay-verify="required" placeholder="请输入品牌名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">首字母</label>
				<div class="layui-input-block" style="width:200px">
					<input type="text" name="firstLetter" required  lay-verify="required" placeholder="请输入首字母" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block" style="width:200px">
					<input type="number" name="sort" required  lay-verify="required" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否显示</label>
				<div class="layui-input-block" style="width:200px">
					<input type="number" name="showStatus" required  lay-verify="required" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">品牌故事</label>
				<div class="layui-input-block" style="width:200px">
					<textarea name="brandStory" required  lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<img id="updateImg" width="120px" height="150px" />
				<label class="layui-form-label">上传图片</label>
				<div class="layui-input-block" style="width:200px">
					<input  type="hidden" name="logo"/>
					<button type="button" id="updateBtn" class="layui-btn">
						<i class="layui-icon layui-icon-upload"></i>修改图片
					</button>
				</div>
			</div>
		</form>
	</script>
<!--对更新表单的渲染-->
	<script type="text/javascript">
		layui.use("table",function(){
			var table = layui.table;
			var $ = layui.jquery;
			//监听表格的工具按钮的事件
			table.on("tool(brand)",function(obj){
				if(obj.event == "edit"){//如果触发事件的按钮是edit按钮
					//更新操作
					//弹出弹出层
					layui.use(["layer","form",'upload'],function(){
						var layer = layui.layer;
						var form = layui.form;
						var upload = layui.upload;
						layer.open({
							type:1,
							content:$("#updateForm").html(),//弹出框内容为id="updateForm"的表单
							area:'500px',
							success:function(){
								//渲染需要渲染的表单控件
								form.val("updateForm",obj.data);
								//console.log(obj.data);
								$("#updateImg").prop("src","${pageContext.request.contextPath}/img/brandImg/"+obj.data.logo);
								<!--在此处渲染文件上传  文件上传-->
								var uploadInst = upload.render({
									elem: '#updateBtn' //绑定元素
									,url: '${pageContext.request.contextPath}/brand/upload' //上传接口
									,field: "file"//设置上传的参数名
									,done: function(res){
										//上传完毕回调
										//console.log(res.path);
										$("input[name=logo]").val(res.path);
										$("#updateImg").prop("src","${pageContext.request.contextPath}/img/brandImg/"+res.path);
									}
									,error: function(){
										//请求异常回调
									}
								});
							},
							btn:["更新","取消"],
							yes:function(index,layobj){
								var updateData = form.val("updateForm");
								$.ajax({
									"url":"${pageContext.request.contextPath}/brand/brands",
									"type":"put",
									"data":JSON.stringify(updateData),
									"contentType":"application/json",
									"dataType":"json",
									"success":function(result){
										if(result.status == "success"){
											table.reload("brand");
										}
										layer.close(index);
									}
								})
							}
						})
					})
				}else if(obj.event == "remove"){
					layui.use(["layer"],function(){
						var layer = layui.layer;
						//console.log(obj.data.stuId);//获取到触发删除事件的id
						layer.open({
							type:1,
							content:"确认要删除吗？",
							btn:["确认","取消"],
							yes:function(index,layobj){
								$.ajax({
									"url":"${pageContext.request.contextPath}/brand/brands/"+obj.data.brandId,
									"type":"delete",
									//"data":JSON.stringify(updateData),
									"contentType":"application/json",
									"dataType":"json",
									"success":function(result){
										if(result.status == "success"){
											table.reload("brand");
										}
										layer.close(index);
									}
								})
							}
						})
					})
				}
			})
		})
	</script>
</body>

</html>